<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<!-- <view class="my_container_body"> -->
		<view class="my_container_body_body">
			<view class="my_container_body_head"></view>
			<view class="background-view-image">
				<u-swiper imgMode="scaleToFill" height="240rpx" :list="bannerList" indicator indicatorMode="line"
					circular radius="24rpx"></u-swiper>
			</view>
			<view class="view-title">
				<view class="view-title-text">
					<u-notice-bar :text="text1" duration="3000" bgColor="#FFFFFF" color="#777777"></u-notice-bar>
				</view>
			</view>
			<view class="body_body">
				<view style="height: 22rpx"></view>
				<view class="body_text"> 找纸网一汇集百种废纸千个城市，个性化推荐匹配，专属管家服务，快速查找废纸资源，赋能行业资源高效对接。
					废纸学堂一为行业培养更多认识全部废纸品种，懂流量和差异化经营的新时代废纸人。 </view>
				<view class="body_botton">
					<view class="one">
						<image src="../../static/imags/ziyuan.png"></image>
						<view>百种废纸千个城市废纸资源</view>
					</view>
					<view class="two">
						<image src="../../static/imags/jingzhunchazhao.png"></image>
						<view>快速精准查找</view>
					</view>
					<view class="three">
						<image src="../../static/imags/kuaisudingwei.png"></image>
						<view>个性化匹配推荐</view>
					</view>
					<view class="four">
						<image src="../../static/imags/feizhiguanjia.png"></image>
						<view>专属服务管家</view>
					</view>
				</view>
			</view>
			<view class="body_view">
				<view style="height: 28rpx"></view>
				<view class="body_view_head">会员尊享特权</view>
				<view style="height: 16rpx"></view>
				<view class="body_view_body">
					<view class="body_view_body_item">
						<view>年度会员：</view>
						<view>可每天发布、查看10次</view>
					</view>
					<view class="body_view_body_item">
						<view>半年度会员：</view>
						<view>可每天发布、查看6次</view>
					</view>
					<view class="body_view_body_item">
						<view>单次会员：</view>
						<view>单次服务</view>
					</view>
					<view class="body_view_body_item">
						<view>免费体验会员：</view>
						<view>每张免费券可发布1次</view>
					</view>
				</view>
			</view>
			<view class="body_vip">
				<!-- 左侧独特卡片 -->
				<view class="benefit_card card_item">
					<view class="title">新人福利</view>
					<image style="width: 56rpx;height: 56rpx;margin: 0 auto;" src="../../static/imags/hongbao.png"
						class="card_image"></image>
					<view class="text">领取免费发布券</view>
				</view>
				<view v-for="(item, index) in cardList" :key="index"
					:class="['card_item', { active: activeIndex === index }]" @click="handleClick(index)">
					<!-- 普通卡片 -->
					<view class="normal_card">
						<view class="title">{{ item.orderTypeName }}</view>
						<view class="price">¥{{ item.money }}</view>
						<view class="old_price" v-if="item.oldMoney">¥{{ item.oldMoney }}</view>
					</view>
				</view>
			</view>
			<view @tap="getOpenidMore" class="body_button_zhifu" v-if="!isIOS">微信支付￥{{ price }}</view>
			<view class="body_button_zhifu" v-else style="background: #cccccc;">iOS用户暂不支持此服务</view>
		</view>
		<!-- </view> -->
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				activeIndex: 2, // 当前选中的卡片索引
				pageTitle: '开通会员',
				showSex: false,
				text1: '欢迎进入找纸塑网线上平台，您在使用过程中遇到任何问题，请致电找纸塑网助理安夏：15396802565',
				cardList: [],
				bannerList: [],
				price: 0,
				isFirst: false,
				orderType: 1,
				isIOS: false // 新增是否iOS平台标志
			};
		},
		onShow() {
			// 新增平台判断
			this.isIOS = uni.getSystemInfoSync().platform === 'ios';
			this.getPayType();
			this.getBanner();
		},
		methods: {
			getBanner() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '21'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data.map((item) => {
							return item.content;
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			getPayType() {
				this.$https.post(this.$api.payTypeList, {}).then((res) => {
					if (res.code == 200) {
						this.cardList = res.data.slice(1, 4);
						this.activeIndex = this.cardList.length - 1
						console.log(this.cardList, '555');
						this.price = res.data.slice(-1)[0].money;
						// 看看是不是新用户
						for (var i = 0; i < this.cardList.length; i++) {
							if (this.cardList[i].orderType == 0) {
								this.isFirst = true;
							}
						}
					} else {
						uni.showToast({
							title: '获取会员失败',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			handleClick(index) {
				this.activeIndex = index; // 更新选中状态
				this.orderType = this.cardList[index].orderType;
				this.price = this.cardList[index].money;
			},
			getOpenidMore() {
				uni.showLoading({
					title: '支付中'
				});
				const _that = this;
				this.$https.post(this.$api.createOrderAndPay, {
					orderType: this.orderType
				}).then((res) => {
					uni.hideLoading();
					if (res.code === 200) {
						//订单对象，从服务器获取
						var dataInfo = res.data;
						//订单对象，从服务器获取
						uni.requestPayment({
							provider: 'wxpay',
							appid: dataInfo.appid, // 微信开放平台 - 应用 - AppId
							timeStamp: dataInfo.timeStamp, // 时间戳（单位：秒）
							package: dataInfo.package, // 'prepay_id=' + prepayId
							paySign: dataInfo.paySign, // 签名
							signType: dataInfo.signType, // 签名算法，这里用的 MD5/RSA 签名
							nonceStr: dataInfo.nonceStr, // 随机字符串
							partnerid: dataInfo.mch_id, // 微信支付商户号
							success(res) {
								if (res.errMsg === 'requestPayment:ok') {
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										duration: 2000
									});
									setTimeout(() => {
										uni.$emit('updateStatus', {
											msg: '页面更新'
										});
										uni.navigateBack({
											delta: 1
										});
									}, 2000);
								}
							},
							fail(err) {
								console.log('支付异常 =>', err);
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;

		.my_container_body_body {
			width: 750rpx;
			height: 1656rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-style: normal;
			text-transform: none;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			background-size: 100% 100%;

			.my_container_body_head {
				width: 686rpx;
				height: 174rpx;
			}

			.background-view-image {
				margin-left: 32rpx;
				width: 686rpx;
				height: 240rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 28rpx;

				image {
					border-radius: 20rpx;
				}
			}

			.view-title {
				margin-top: 16rpx;
				margin-left: 32rpx;
				height: 72rpx;
				width: 686rpx;
				display: flex;

				.view-title-text {
					width: 686rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx !important;
					background: #ffffff;
				}
			}

			.body_body {
				width: 686rpx;
				margin-left: 32rpx;
				height: 394rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 26rpx;

				.body_text {
					width: 642rpx;
					height: 158rpx;
					margin-left: 24rpx;
					font-weight: 520;
					font-size: 26rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.body_botton {
				display: flex;
				width: 686rpx;
				height: 214rpx;
				margin-top: 28rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					margin-left: 22rpx;
				}

				.one {
					width: 132rpx;
					height: 160rpx;
					margin-left: 22rpx;

					view {
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
				}

				.two {
					width: 132rpx;
					height: 128rpx;
					margin-left: 40rpx;

					view {
						height: 32rpx;
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
				}

				.three {
					width: 146rpx;
					height: 128rpx;
					margin-left: 30rpx;

					view {
						height: 32rpx;
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
				}

				.four {
					width: 132rpx;
					height: 122rpx;
					margin-left: 38rpx;

					view {
						height: 32rpx;
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
				}
			}

			.body_view {
				width: 686rpx;
				height: 292rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 26rpx;
				margin-left: 32rpx;

				.body_view_head {
					width: 210rpx;
					height: 44rpx;
					font-weight: 550;
					font-size: 32rpx;
					color: #333333;
					line-height: 45rpx;
					text-align: left;
					margin-left: 28rpx;
				}

				.body_view_body {
					width: 686rpx;
					height: 176rpx;
					font-size: 26rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: left;
					margin-left: 28rpx;

					.body_view_body_item {
						display: flex;
						height: 44.2rpx;

						:nth-child(1) {
							font-weight: 550;
							font-size: 32rpx;
							color: #333333;
							line-height: 44.2rpx;
						}

						:nth-child(2) {
							ont-weight: 400;
							font-size: 26rpx;
							color: #333333;
							line-height: 44.2rpx;
						}
					}
				}
			}

			.body_vip {
				display: flex;
				justify-content: space-around;
				width: 686rpx;
				height: 220rpx;
				background: #ffffff;
				border-radius: 24rpx;
				margin: 28rpx auto;
				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
				padding-top: 24rpx;
				position: relative;

				.top_view {
					width: 88rpx;
					height: 32rpx;
					background: #ec6630;
					border-radius: 12rpx 12rpx 12rpx 0rpx;
					margin-top: 10rpx;
					position: absolute; // 使用绝对定位
					top: 0rpx; // 定位到顶部
					color: white;
					left: 0rpx;
					font-weight: 400;
					font-size: 16rpx;
					color: #ffffff;
					line-height: 22rpx;
					text-align: center;
					line-height: 32rpx;
					margin-left: 24rpx;
				}

				.card_item {
					width: 144rpx;
					height: 172rpx;
					text-align: center;
					border-radius: 24rpx;
					background: #fdfbf4; // 默认背景
					border: 2rpx solid #fbebcb; // 默认边框
					box-sizing: border-box;

					&:not(:first-child) {
						// margin-left: 24rpx;
					}

					&.active {
						background-color: #fffae6; // 选中背景
						border: 2rpx solid #ffd700; // 选中边框
					}

					.normal_card {
						.title {
							width: 80rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #9a5300;
							line-height: 28rpx;
							text-align: center;
							margin: 20rpx auto 0;
						}

						.price {
							width: 72rpx;
							height: 56rpx;
							font-size: 24rpx;
							font-weight: 550;
							color: #9a5300;
							line-height: 56rpx;
							text-align: center;
							margin: 10rpx auto 0;
						}

						.old_price {
							width: 50rpx;
							height: 26rpx;
							font-size: 18rpx;
							color: #777777;
							line-height: 25rpx;
							text-align: center;
							text-decoration: line-through;
							margin: 10rpx auto 0;
						}
					}
				}

				.benefit_card {
					.title {
						width: 80rpx;
						height: 28rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #9a5300;
						line-height: 28rpx;
						text-align: center;
						margin: 20rpx auto 0;
					}

					.label {
						width: 80rpx;
						height: 28rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #9a5300;
						line-height: 28rpx;
						text-align: center;
						margin: 20rpx auto 0;
					}

					.text {
						width: 104rpx;
						height: 52rpx;
						font-weight: 400;
						font-size: 16rpx;
						color: #333333;
						line-height: 26rpx;
						text-align: center;
						margin-left: 20rpx;
					}
				}
			}

			.body_button_zhifu {
				width: 686rpx;
				height: 92rpx;
				background: #1ee825;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 92rpx;
				text-align: center;
				margin-left: 32rpx;
			}

			/* 可以添加一个禁用状态的样式 */
			.body_button_zhifu[disabled] {
				background: #cccccc !important;
			}
		}
	}
</style>